﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css" />
</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3">
				<div class="row-fluid">
					<div class="span3">aaa</div>
					<div class="span3">aaa</div>
					<div class="span3">aaa</div>
					<div class="span3">aaa</div>
				</div>
				<div class="btn-group">
					<a class="btn btn-primary" value="user">
						<i class="icon-user icon-white"></i>
					</a>
					<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						Action<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Action</a>
						</li>
						<li>
							<a href="#">AnotherAction</a>
						</li>
						<li>
							<a href="#">Something else</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#">Seperated link</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="span9">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab1" data-toggle="tab">Home</a>
					</li>
					<li>
						<a href="#tab2" data-toggle="tab">Profile</a>
					</li>
					<li>
						<a href="#tab3" data-toggle="tab">Message</a>
					</li>
				</ul>
				<div>
					<div class="tab-pane active" id="tab1">
						<table class="table table-bordered table-striped">
							<tr>
								<th>输入条件</th>
								<th>输入条件</th>
								<th>输入条件</th>
							</tr>
							<tr>
								<td>输入条件</td>
								<td>输入条件</td>
								<td>输入条件</td>
							</tr>
							<tr>
								<td>输入条件</td>
								<td>输入条件</td>
								<td>输入条件</td>
							</tr>
						</table>
						<div class="pagination">
							<ul class="pager">
								<li>
									<a href="#">Prev</a>
								</li>
								<li class="active">
									<a href="#">1</a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<li>
									<a href="#">4</a>
								</li>
								<li>
									<a href="#">Next</a>
								</li>
							</ul>
						</div>
						<div>
							<input type="button" class="btn" value="default"/>
							<input type="button" class="btn btn-primary" value="primary"/>
							<input type="button" class="btn btn-info" value="info"/>
							<input type="button" class="btn btn-success" value="success"/>
							<input type="button" class="btn btn-warning" value="warning"/>
							<input type="button" class="btn btn-danger" value="danger"/>
							<input type="button" class="btn btn-inverse" value="inverse"/>
							<div class="btn-group">
								<a class="btn btn-primary" value="user">
									<i class="icon-user icon-white"></i>
								</a>
								<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
									Action<span class="caret"></span>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">Action</a>
									</li>
									<li>
										<a href="#">AnotherAction</a>
									</li>
									<li>
										<a href="#">Something else</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">Seperated link</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab2">
						<span>profile</span>
						<div id="alert" class="alert alert-error" style="display:none">
							<a class="close" data-dismiss="alert" href="#">&times;</a>
							<p>
								<strong>Warning!</strong> Best check yo self, you're not looking too good.
							</p>
							<p>
								<a class="btn btn-info" href="#">确定</a>
								<a class="btn btn-info" href="#">关闭</a>
							</p>
						</div>
						<div>
							<a class="btn btn-primary" href="javascript:$('#alert').show();">提示</a>
						</div>
					</div>
					<div class="tab-pane" id="tab3">
						<span>Message</span>
						<input type="button" class="btn" data-toggle="modal" data-target="#myModel" value="Launch Modal"/>
						<div class="modal hide" id="myModel" style="display:none">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">×</button>
								<h3>modal header</h3>
							</div>
							<div class="modal-body">
								<p>One file body...</p>
							</div>
							<div class="modal-footer">
								<a href="#" class="btn" data-dismiss="modal">Close</a>
								<a href="#" class="btn btn-primary">Save changes</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
	function showModal(){
		$("#myModel").modal({show : true});
		alert("aaa");
	}
</script>
</html>